<template>
    <div class="home">
        <div v-for="(item, idx) of homeList" :key="idx" class="animated homeList" :ref="`home` + idx" :style="{
            zIndex: idx == homeListIdx ? 4 : item.zIndex
        }">
            <video muted :ref="`video` + idx" :poster="item.bg" autoplay @onCanplaythrough="display()" v-if="item.isLoading"
                style="width:100vw;height:100vh; object-fit: fill;" loop :controls="false" controlsList="nodownload"
                disablePictureInPicture>
                <source v-bind:src="item.video" type="video/mp4">
                <source v-bind:src="item.video" type="video/ogg">
            </video>
            <div class="homeList-data" v-if="item.isLoading">
                <div class="homeList-data-title wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.4s">
                    {{ item.title }}
                </div>
                <div class="homeList-data-details wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="0.8s">
                    {{ item.details }}
                </div>
                <div class="homeList-data-consulting wow bounceInLeft" data-wow-delay=".3s" data-wow-duration="1.2s"
                    @click="openInfoDialog">
                    <vs-button style="background: linear-gradient(90deg, #006FFF 0%, #60DCA7 100%);
                        font-size: 18px;
                        padding: 6px 0;
                        width: 170px;
                        ">
                        {{ item.buttonText }} <img style="margin-left:4px" src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        <template #animate>
                            <img src="https://static.pdwl.net/jituan/images/zixun.png" alt="">
                        </template>
                    </vs-button>
                </div>
            </div>
        </div>
        <div class="home-handover" :class="{ 'home-handover-active': isMouseEnter }"
            @mouseenter="() => handoverEnterLeave(true)" @mouseleave="() => handoverEnterLeave(false)">
            <div class="flex_end home-handover-content" @click="handoverContent(0)">
                <span class="home-handover-content-text"
                    v-if="(homeListMouseIdx == 0 && isWheel) || isMouseEnter">AIGC时代</span>
                <div class="home-handover-content-cross"
                    :class="{ 'home-handover-content-cross-active': homeListMouseIdx == 0 && isWheel }">
                </div>
            </div>
            <div class="flex_end home-handover-content" @click="handoverContent(1)">
                <span class="home-handover-content-text"
                    v-if="(homeListMouseIdx == 1 && isWheel) || isMouseEnter">牛视3.0</span>
                <div class="home-handover-content-cross"
                    :class="{ 'home-handover-content-cross-active': homeListMouseIdx == 1 && isWheel }">
                </div>
            </div>
            <div class="flex_end home-handover-content" @click="handoverContent(2)">
                <span class="home-handover-content-text"
                    v-if="(homeListMouseIdx == 2 && isWheel) || isMouseEnter">智企云平台</span>
                <div class="home-handover-content-cross"
                    :class="{ 'home-handover-content-cross-active': homeListMouseIdx == 2 && isWheel }">
                </div>
            </div>
            <div class="flex_end home-handover-content" @click="handoverContent(3)">
                <span class="home-handover-content-text"
                    v-if="(homeListMouseIdx == 3 && isWheel) || isMouseEnter">全球合伙人计划</span>
                <div class="home-handover-content-cross"
                    :class="{ 'home-handover-content-cross-active': homeListMouseIdx == 3 && isWheel }">
                </div>
            </div>
        </div>
        <div class="home-vertical"></div>
        <div class="home-mouse">
            <div></div>
            向上滑动<br />探索更多
        </div>
        <div class="home-footer wow bounceInUp" data-wow-delay=".3s" data-wow-duration="0.8s">
            杭州品达企服科技 (集团) 有限公司 ▏<span @click="openWindow" style="cursor: pointer;">浙ICP备2023023097号-1</span>
        </div>
        <InfoDialog ref="infoDialog"></InfoDialog>
    </div>
</template>
<script>
import 'animate.css'
import InfoDialog from '@/components/infoDialog'
let time = null
export default {
    components: { InfoDialog },
    data() {
        return {
            homeList: [
                {
                    zIndex: 0,
                    bg: "https://static.pdwl.net/jituan/images/home/icon.png",
                    video: "https://static.pdwl.net/jituan/videos/7098254735202844672.mp4",
                    title: 'AIGC时代',
                    details: '每一家企业都需要一个数字员工',
                    buttonText: '立即体验',
                    isLoading: true,
                },
                {
                    zIndex: 0,
                    bg: "https://static.pdwl.net/jituan/images/home/icon1.png",
                    video:  "https://static.pdwl.net/jituan/videos/7098254712394219520.mp4",
                    title: '牛视3.0',
                    details: '全新升级，为优秀操盘手倾力打造',
                    buttonText: '了解更多',
                    isLoading: false,
                },
                {
                    zIndex: 0,
                    bg: "https://static.pdwl.net/jituan/images/home/icon3.png",
                    video: "https://static.pdwl.net/jituan/videos/7098255130331447296.mp4",
                    title: '智企云平台',
                    details: '探索无限可能，一触即发',
                    buttonText: '立即体验',
                    isLoading: false,
                },
                {
                    zIndex: 0,
                    bg: "https://static.pdwl.net/jituan/images/home/icon2.png",
                    video:"https://static.pdwl.net/jituan/videos/7098254701463863296.mp4",
                    title: '全球合伙人计划',
                    details: '顺势而为，乘势而动',
                    buttonText: '了解更多',
                    isLoading: false,
                },
            ],
            isWheel: true,
            homeListIdx: 0,
            homeListMouseIdx: 0,
            isMouseEnter: false
        }
    },
    beforeCreate() {
        let imgs = [
            "https://static.pdwl.net/jituan/images/home/icon.png",
            "https://static.pdwl.net/jituan/images/home/icon1.png",
            "https://static.pdwl.net/jituan/images/home/icon3.png",
            "https://static.pdwl.net/jituan/images/home/icon2.png",
        ]
        imgs.forEach((item) => {
            let img = new Image();
            img.src = item;
            img.onload = function () { }
        })
        let videoS = [
            "https://static.pdwl.net/jituan/videos/7098254735202844672.mp4",
            "https://static.pdwl.net/jituan/videos/7098254712394219520.mp4",
            "https://static.pdwl.net/jituan/videos/7098255130331447296.mp4",
            "https://static.pdwl.net/jituan/videos/7098254701463863296.mp4"
        ]
        videoS.forEach(item => {
            let video = document.createElement('video');
            video.src = item
            video.onload = function () {
            }
        })
    },
    created() {
        this.homeList[this.homeListIdx].isLoading = true
        let videoS = [
        "https://static.pdwl.net/jituan/videos/7098254735202844672.mp4",
            "https://static.pdwl.net/jituan/videos/7098254712394219520.mp4",
            "https://static.pdwl.net/jituan/videos/7098255130331447296.mp4",
            "https://static.pdwl.net/jituan/videos/7098254701463863296.mp4"]
        videoS.forEach((item, idx) => {
            this.homeList[idx].video = item
        })
    },
    mounted() {
        let that = this
        var wow = new this.$WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: false,
            live: true,
            scrollContainer: null
        })
        wow.init()
        this.$nextTick(() => {
            window.addEventListener('wheel', this.handleMouseWheel, {
                passive: false,
            })
        })
    },

    beforeDestroy() {
        window.removeEventListener('wheel', this.handleMouseWheel, {
            passive: false,
        })
    },
    methods: {
        openWindow(){
            window.open('https://beian.miit.gov.cn')
        },
        display() { },
        openInfoDialog() {
            this.$refs.infoDialog.openInfoDialog()
        },
        handoverEnterLeave(type) {
            this.isMouseEnter = type
        },
        handleMouseWheel(e) {
            let that = this
            if (time) {
                clearTimeout(time)
                time = null
            }
            let wheelDelta = e.wheelDelta > 0
            time = setTimeout(() => {
                time = true
                let homeDom = that.$refs[`home` + that.homeListIdx][0]
                // let outList = ['bounceOutDown', 'bounceOutDown', 'bounceOutDown', 'bounceOutDown']
                // let enterList = ['bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp']
                // let enterList = ['bounceInDown', 'bounceInDown', 'bounceInDown', 'bounceInDown']
                that.isWheel = false
                homeDom.className = `animated homeList ${wheelDelta ? 'bounceOutUp' : 'bounceOutDown'}`
                if (!wheelDelta) {
                    if (that.homeListIdx >= (that.homeList.length - 1)) {
                        that.$set(that.homeList[that.homeListIdx], 'zIndex', 0)
                        that.$set(that.homeList[0], 'zIndex', 2)
                        if (!that.homeList[0].isLoading) that.$set(that.homeList[0], 'isLoading', true)

                    } else {
                        that.$set(that.homeList[that.homeListIdx], 'zIndex', 0)
                        that.$set(that.homeList[that.homeListIdx + 1], 'zIndex', 2)
                        if (!that.homeList[that.homeListIdx + 1].isLoading) that.$set(that.homeList[that.homeListIdx + 1], 'isLoading', true)

                    }
                }else{
                    if (that.homeListIdx <= 0) {
                        that.$set(that.homeList[that.homeListIdx], 'zIndex', 0)
                        that.$set(that.homeList[that.homeList.length - 1 ], 'zIndex', 2)
                        if (!that.homeList[that.homeList.length - 1].isLoading) that.$set(that.homeList[that.homeList.length - 1], 'isLoading', true)

                    } else {
                        that.$set(that.homeList[that.homeListIdx], 'zIndex', 0)
                        that.$set(that.homeList[that.homeListIdx - 1], 'zIndex', 2)
                        if (!that.homeList[that.homeListIdx - 1].isLoading) that.$set(that.homeList[that.homeListIdx- 1], 'isLoading', true)

                    }
                }
                that.$nextTick(()=>{
                    let video = that.$refs[`video` + that.homeListIdx][0]
                    // if (video) video.pause()
                })
                setTimeout(() => {
                    homeDom.className = `animated homeList`
                    if(!wheelDelta){
                        if (that.homeListIdx >= (that.homeList.length - 1)) that.homeListIdx = 0
                        else that.homeListIdx++
                    }else{
                        if (that.homeListIdx <= 0) that.homeListIdx = 3
                        else that.homeListIdx--
                    }
                    that.$nextTick(() => {
                        let video = that.$refs[`video` + that.homeListIdx][0]
                        // if (video) video.play()
                    })
                    time = false
                    that.homeListMouseIdx = that.homeListIdx
                    that.isWheel = true
                }, 1000)
            }, 200)

        },
        handoverContent(id) {
            let that = this
            if (id == this.homeListIdx) return
            let homeDom = this.$refs[`home` + that.homeListIdx][0]
            let outList = ['bounceOutDown', 'bounceOutDown', 'bounceOutDown', 'bounceOutDown']
            // let enterList = ['bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp']
            let enterList = ['bounceInDown', 'bounceInDown', 'bounceInDown', 'bounceInDown']
            that.isWheel = false
            if (!that.homeList[id].isLoading) that.$set(that.homeList[id], 'isLoading', true)
            that.$set(that.homeList[id], 'zIndex', 2)
            homeDom.className = `animated homeList ${outList[that.homeListIdx]}`
            that.$set(that.homeList[that.homeListIdx], 'zIndex', 0)
            that.$nextTick(()=>{
                let video = that.$refs[`video` + that.homeListIdx][0]
                // video.pause()
            })
            setTimeout(() => {
                homeDom.className = `animated homeList`
                that.homeListIdx = id
                if (!that.homeList[that.homeListIdx].isLoading) that.$set(that.homeList[that.homeListIdx], 'isLoading', true)
                that.$nextTick(() => {
                    let video = that.$refs[`video` + this.homeListIdx][0]
                    // if (video) video.play()
                })
                time = false
                that.isWheel = true
                that.homeListMouseIdx = that.homeListIdx
            }, 1000)
        }

    }
}
</script>
<style lang="scss" scoped>
.home {
    position: relative;

    .homeList {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;

        &-data {
            position: absolute;
            left: 17%;
            top: 40%;
            transform: translateY(-50%);
            z-index: 1;

            &-title {
                font-size: 80px;
                font-family: Microsoft YaHei-Bold, Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }

            &-details {
                font-size: 48px;
                font-family: Microsoft YaHei-Light, Microsoft YaHei;
                font-weight: 300;
                color: #FFFFFF;
                line-height: 16px;
                letter-spacing: 4px;
                margin-top: 40px;
            }

            &-consulting {
                margin-top: 80px;
            }
        }

    }

    &-footer {
        position: fixed;
        left: 0;
        right: 0;
        text-align: center;
        bottom: 30px;
        width: 100%;
        font-size: 14px;
        z-index: 10;
    }

    &-handover {
        position: fixed;
        z-index: 10;
        bottom: 150px;
        right: 220px;
        text-align: left;
        cursor: pointer;
        padding: 10px 0;

        &-content {
            // margin-top: 15px;
            height: 16px;
            line-height: 16px;
            transition: all 0.3s;
            cursor: pointer;

            &:hover {
                .home-handover-content-cross {
                    width: 40px;
                    opacity: 0.7;
                }
            }

            &-text {
                font-size: 14px;
                line-height: 20px;
            }

            &-cross {
                height: 1px;
                width: 20px;
                background: #fff;
                transition: all 0.3s;

                &-active {
                    width: 40px;
                    opacity: 0.7;
                }
            }
        }
    }

    .home-handover-active {
        .home-handover-content {
            height: 35px;
            line-height: 35px;
        }
    }

    &-vertical {
        position: fixed;
        z-index: 10;
        bottom: 0px;
        top: 0;
        right: 180px;
        width: 1px;
        height: 100%;
        background: #FFFFFF;
        opacity: 0.6;
    }

    &-mouse {
        position: fixed;
        z-index: 10;
        bottom: 102px;
        right: 78px;
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 18px;
        text-align: center;

        div {
            width: 44px;
            height: 78px;
            border-radius: 16px 16px 25px 25px;
            border: 2px solid #FFFFFF;
            position: relative;
            margin: 0 auto 16px;

            &::after {
                content: '';
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 3px;
                height: 14px;
                background: #FFFFFF;
                animation: mouse 1.5s linear infinite;
                transition: all .3s;

                @keyframes mouse {
                    0% {
                        transform: translateY(-10px);
                    }

                    100% {
                        transform: translateY(0px);
                    }

                }
            }
        }
    }
}
</style>
